<template>
	<view>
		
		<!--轮播-->
		  <swiper class="card-swiper square-dot" 
				  :indicator-dots="true" 
				  :circular="true"
				  :autoplay="true" 
				  interval="5000" 
				  duration="500" 
				  @change="cardSwiper" 
				  indicator-color="#8799a3"
				  indicator-active-color="#feb2b2">
		  	<swiper-item v-for="(item,index) in info" :key="index" :class="cardCur==index?'cur':''">
				<view class="swiper-item">
					<image :src="item.img" mode="aspectFill"></image>
				</view>
		  	</swiper-item>
		  </swiper>
		  <!--轮播-->
		  
		  <!--热门活动-->
		  <view class="bg-white activate" >
				<view style="display: flex;align-items: center;">
					<text style="margin-right: 5upx;" class="cuIcon-hot line-red" ></text>
					<text style="font-weight: bold;font-size: 110%;">热门活动</text>
				</view>
				<view class="text-gray">
				  <text>查看全部</text>
				  <text class="cuIcon-right"></text>
				</view>
		  </view>
		  <!--热门活动-->
		  
		  
		  
		  <!--商品分类-->
		  <view class="icon-tab bg-white align-center">
			    <view class="icon-item" v-for="(item,index) in iconList" :key = index>
					<image  :src="item.url"></image>
					<view style="text-align: center;">{{item.name}}</view>
				</view>
		  </view>
		  <!--商品分类-->
		  
		  <!--热卖商品-->
		  <view class="activate bg-white solid-bottom margin-top">
		  	<view class="action">
		  		<text class="cuIcon-title" style="color: #feb2b2;"></text>
				 <text style="font-weight:bold;font-size: 110%;">活动商品</text>
		  	</view>
		  </view>
		  <!--热卖商品-->
		  <!--商品列表-->
		  <!--商品列表-->
		  <view style="margin-top:5upx;">
			  <view style="padding: 20upx 20upx 20upx 20upx;" 
					class="flex justify-around bg-white" 
					v-for="(item,index) in goodsList" :key="index">
				  <view style="width: 250upx;">
					  <image style="width: 250upx;height: 250upx;" 
					  :src="item.img"></image>
				  </view>
				  <view style="width: 400upx; flex-direction: column;border-bottom: 0.5upx solid #e7e7e7;" class="flex justify-between">
					 <view>
					  <view style="font-weight: bold; font-size: 30upx;">
						  <text class="cu-tag  bg-gradual-red round ">{{item.firstTag}}</text>
						  {{item.title}}
					  </view>
					  <view class="cu-tag bg-brown radius">{{item.shopName}}</view>
					</view>
					<view style="margin-bottom: 5upx;">
						<view>
							<text class="cu-tag  bg-red radius">{{item.secondTag[0]}}</text>
							<text class="cu-tag  bg-orange radius">{{item.secondTag[1]}}</text>
						</view>
						<view style="font-size: 120%;">
							<text style="color:#ff0000;">
							<text style="font-size: 70%;">¥</text>
							{{item.price}}
							</text>
							<text style="color: grey;font-size: 85%; margin-left: 10upx;">已售{{item.sold}}</text>
						</view>
						<view style="width: 100%;height: 20upx;"></view>
					</view>
				</view>
			  </view>
		  </view>
		  <!--商品列表-->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
				cardCur:0,
				
				//搜索
				search:"",
				
				//导航栏列表
				TabList:[
					{ 	
						tag:"首页",
						url:"../index",
						},
					{ 	
						tag:"商品",
						url:"./goods/goods",
						},
					{	
						tag:"购物车",
						url:"./carts/carts",
						},
					{	
						tag:"我的",
						url:"./mine/mine",
					},
				],
				
				//标签下标
				thisIndex:0,
				
				//轮播内容
				//content：内容描述
				//img：图片地址
				info: [
				  {
					  img:"",
					  content:"",
				  },
				  {
					  img:"",
					  content:"",
				  },
				  {
					  img:"",
					  content:"",
				  }
				],
				
				//分类标签
				//name:分类名
				//url:图标地址
				iconList:[
					{
						name:"",
						url:"",
					},{
						name:"",
						url:"",
					},{
						name:"",
						url:"",
					},{
						name:"",
						url:"",
					},{
						name:"",
						url:"",
					}
				],
				
				//热卖商品推荐
				//id:商品id
				//title:商品名
				//firstTag:活动标签
				//shopName:商店名
				//price:商品价格
				//secondTag:推荐标签
				//sold:已售数量
				//img:商品图片
				goodsList:[
					{
						id:"",
						img:"",
						title:"",
						firstTag:"",
						shopName:"",
						price:"",
						secondTag:[],
						sold:"",
						  
					 },{
						id:"",
						img:"",
						title:"",
						firstTag:"",
						shopName:"",
						price:"",
						secondTag:[],
						sold:"",
					 },{
						id:"",
						img:"",
						title:"",
						firstTag:"",
						shopName:"",
						price:"",
						secondTag:[],
						sold:"",
					 },{
						id:"", 
						img:"",
						title:"",
						firstTag:"",
						shopName:"",
						price:"",
						secondTag:[],
						sold:"",
					 },{
						id:"",
						img:"",
						title:"",
						firstTag:"",
						shopName:"",
						price:"",
						secondTag:[],
						sold:"",
					 }
				]
			}
		},
		onLoad(){
			//获取轮播图数据
			this.getBanners();
			//获取分类列表数据
			this.getIconList();
			//获取商品数据
			this.getGoodsList();
		},
		mounted() {
			//获取轮播图数据
			this.getBanners();
			//获取分类列表数据
			this.getIconList();
			//获取商品数据
			this.getGoodsList();
		},
		methods: {
			//
			    
			//轮播图图片样式切换
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
			//页面跳转
			goPage(e){
					var index = e;
					console.log(index);
					if(this.thisIndex===index){
						return ;
					}
					var url = this.TabList[index].url;
					uni.navigateTo({
						url:url
					});
				},
			//获得轮播图的数据
			getBanners(){
				var data=[
					{
						img:"http://39.106.100.179:9999/group1/M00/00/00/J2pks175XCuAQ3zaAAC1iBK7Cvg128.jpg",
						content:"内容 A",
					},{
						img:"http://39.106.100.179:9999/group1/M00/00/00/J2pks175XD-AcVSMAAB0RlzUD-M434.jpg",
						content:"内容B",
					},{
						img:"http://39.106.100.179:9999/group1/M00/00/00/J2pks175XFCAUfdXAAFPBRQXiLc877.jpg",
						content:"内容C",
					}
				];
				this.info = data;
			},
			//获取分类列表数据
			getIconList(){
					var data=[
						{
							name:"热卖",
							url:"../../static/shop/icon/remai.png",
						},
						{
							name:"文具",
							url:"../../static/shop/icon/wenjuhaocai.png",
						},
						{
							name:"课程",
							url:"../../static/shop/icon/kecheng.png",
						},
						{
							name:"其他",
							url:"../../static/shop/icon/qita.png",
						},
					];
					this.iconList = data;
			},
			//获取活动商品列表数据
			getGoodsList(){
				var data=[
					{
						id:1,
						img:"http://39.106.100.179:9999/group1/M00/00/00/J2pks175XHCAXC49AACYrBrsRsM205.jpg",
						title:"新鲜荔枝,当季上市",
						firstTag:"水果节",
						shopName:"陈哥哥爱心旗舰店",
						price:"23.3",
						secondTag:["小编推荐","扶贫产品"],
						sold:"23",
						
					},{
						id:2,
						img:"http://39.106.100.179:9999/group1/M00/00/00/J2pks175XIKAK3gvAACIPxPoHNQ363.jpg",
						title:"樱桃草莓组合",
						firstTag:"水果节",
						shopName:"陈哥哥爱心旗舰店",
						price:"24.3",
						secondTag:["小编推荐","扶贫产品"],
						sold:"66",
					},{
						id:3,
						img:"http://39.106.100.179:9999/group1/M00/00/00/J2pks175XJGAU8CGAAJNRpB7hYE364.jpg",
						title:"新鲜香草柠",
						firstTag:"水果节",
						shopName:"陈哥哥爱心旗舰店",
						price:"12.5",
						secondTag:["小编推荐","扶贫产品"],
						sold:"181",
					},{
						id:4,
						img:"http://39.106.100.179:9999/group1/M00/00/00/J2pks175XKGAXqd3AAQx9s_uG3c505.jpg",
						title:"大樱桃",
						firstTag:"水果节",
						shopName:"陈哥哥爱心旗舰店",
						price:"61.5",
						secondTag:["小编推荐","扶贫产品"],
						sold:"1",
					},{
						id:5,
						img:"http://39.106.100.179:9999/group1/M00/00/00/J2pks175XLWAP4lmAACR89VA2vM973.jpg",
						title:"最'健康'的水果,牛油果",
						firstTag:"水果节",
						shopName:"陈哥哥爱心旗舰店",
						price:"114514",
						secondTag:["小编推荐","扶贫产品"],
						sold:"0",
					}
				];
				this.goodsList = data;
			}
		}
	}
</script>

<style>
	.activate{
		display: flex;
		justify-content: space-between;
		height: 90upx;
		align-items: center;
		padding-left: 20upx;
		padding-right: 20upx;
	}
	.icon-tab{
		border-top: 2upx solid #e7e7e7;
		display: flex;
		justify-content: space-around;
		padding-top: 30upx;
		padding-bottom: 30upx;
	}
	.icon-item image{
		height: 100upx;
		width: 100upx;
	}
	.events{
		border-top: 2upx solid #e7e7e7;
	}
</style>

